<template>
  <div class="dialog-container" style="width: 300px;">
    <el-dialog
      title="菜单信息"
      :visible.sync="dialogFormVisible"
      width="400px"
      append-to-body
      @open="onOpen"
      @opened="onOpened"
      @close="onClose"
      @closed="onClosed"
    >
      <div class="app-container">
        <el-scrollbar v-loading="listLoading" style="height: 500px; background-color: #FFF;">
          <el-tree
            ref="tree"
            :data="list"
            show-checkbox
            node-key="id"
            default-expand-all
            :props="defaultProps"
            :render-content="renderContent"
            :default-expanded-keys="defaultExpandedKeys"
            @check-change="handleClick"
          />
        </el-scrollbar>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" size="mini" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    rowData: {
      type: Object,
      default: () => ({})
    },
    checkeds: {
      type: Array,
      default: () => ([])
    },
    type: {
      type: String,
      default: () => ('')
    },
    multiple: {
      type: Boolean,
      default: () => (false)
    }
  },
  data() {
    return {
      list: [],
      listLoading: false,
      calcTableHeight: '500px',
      dialogFormVisible: false,
      defaultCheckedKeys: this.checkeds,
      defaultExpandedKeys: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  created() {},
  methods: {
    onOpen() {
      this.defaultCheckedKeys = this.checkeds
      if (this.$listeners.getCheckedKeys) {
        console.log('getCheckedKeys')
        this.$emit('getCheckedKeys', this.rowData, (checkedKeys) => {
          if (checkedKeys && checkedKeys.length) {
            this.defaultCheckedKeys = checkedKeys
          }
        })
      }
      this.getData()
    },
    renderContent(h, { data, node, store }) {
      return (
        <span>
        <i class={data.meta.icon}></i>
        <span> {data.name}</span>
        </span>
        )
    },
    // 获取数据
    async getData() {
      this.listLoading = true
      const params = {
        type: this.type
      }
      this.$store.dispatch('system/menu/treeList', params).then((data) => {
        this.list = data
        if (params.type === 'BTN' && data && data.length) {
          this.defaultExpandedKeys = this.getExpandedKeys(data)
        }
        // console.log(this.defaultCheckedKeys)
        if (this.defaultCheckedKeys && this.defaultCheckedKeys.length) {
          this.$nextTick().then(() => {
            this.defaultCheckedKeys.forEach(_key => {
              this.$refs.tree.setChecked(_key, true, false)
            })
          })
        }
        this.listLoading = false
      })
    },
    getExpandedKeys(data) {
      let keys = []
      data.forEach(row => {
        if (row.type === 'MENU') {
          if (row.childrenSize && row.childrenSize > 0) {
            keys.push(row.id)
            const childrenKeys = this.getExpandedKeys(row.children)
            if (childrenKeys && childrenKeys.length) {
              keys = keys.concat(childrenKeys)
            }
          }
        }
      })
      return keys
    },
    onOpened() {
    },
    onClose() {
    },
    onClosed() {
      this.list = []
    },
    onSubmit() {
      var checkedNodes
      if (this.multiple) {
        var halfNodes = this.$refs.tree.getHalfCheckedNodes() || []
        var nodes = this.$refs.tree.getCheckedNodes() || []
        checkedNodes = halfNodes.concat(nodes)
      } else {
        checkedNodes = this.$refs.tree.getCheckedNodes()
      }
      console.log(checkedNodes)
      this.$emit('confirm', this.rowData, checkedNodes)
      this.dialogFormVisible = false
    },
    handleClick(data, checked, node) {
      if (checked && !this.multiple) {
        // this.$refs.tree.setCheckedKeys([data.id])
        this.$refs.tree.setCheckedNodes([data])
      }
    }
  }
}
</script>
<style lang="scss">
.el-scrollbar__wrap {
  overflow-x: hidden;
}
.el-dialog__body {
  background: #eef4f9;
  padding: 0px;
}
.app-container {
  padding: 10px;
  box-sizing: border-box;
  .app-container-container {
    padding: 10px;
    margin: 6px 0 0;
    background: #fff;
  }
}
</style>
